<template>
  <div id="collegeCompare" class="main">
    <div class="df" style="justify-content: space-between">
      <div class="comopare-title df f20">
        <div class="title-bar"></div>
        院校对比
      </div>
      <el-button :icon="Plus" link @click="handleAddCollege"
        >添加院校</el-button
      >
    </div>
    <div class="college-compared-container">
      <div class="">
        <table
          class="first-table"
          style="table-layout: fixed; width: 100%; border-collapse: collapse"
        >
          <thead class="">
            <th style="border-right: 1px solid #e4e4e4; width: 136px" class="">
              <div class="text">学校名称</div>
            </th>
            <th
              style="border-right: 1px solid #e4e4e4; padding: 10px"
              class=""
              v-for="item in compareList"
              :key="item.code"
            >
              <div>
                <img style="width: 50px" :src="item.logoUrl" alt="" />
                <div class="">{{ item.cnName }}</div>
              </div>
            </th>
          </thead>
        </table>
        <table
          class="second-table"
          style="table-layout: fixed; width: 100%; border-collapse: collapse"
        >
          <tbody class="compared-container-content">
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>综合排名</span>
                </div>
              </td>
              <td
                class="content-probability"
                v-for="item in compareList"
                :key="item.code"
              >
                <div class="content-probability-data">
                  <span class="number">{{ item.ranking }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>所属地区 </span>
                </div>
              </td>
              <td
                class="content-plan"
                v-for="item in compareList"
                :key="item.code"
              >
                <div class="content-plan-number">
                  <div class="title">
                    <span class="number"
                      >{{ item.provinceName }}&nbsp;{{ item.cityName }}</span
                    >
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>创办时间</span>
                </div>
              </td>

              <td
                class="content-major"
                v-for="item in compareList"
                :key="item.code"
              >
                <div class="content-major-plan">
                  {{ item.createdYear }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>办学性质</span>
                </div>
              </td>
              <td
                class="content-categorie"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>
                  {{ item.natureTypeName }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>隶属于</span>
                </div>
              </td>
              <td
                class="content-feature"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>
                  <p>{{ item.belong }}</p>
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">学科层次</td>
              <td
                class="content-city"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>
                  {{
                    item.eduLevel == 'ben'
                      ? '本科'
                      : item.eduLevel == 'zhuan'
                        ? '专科'
                        : '-'
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>院校类型</span>
                </div>
              </td>
              <td
                class="content-shuo"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>{{ item.categories[0] }}</div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>院校特色</span>
                </div>
              </td>
              <td
                class="content-shuo"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>{{ item.features.join(',') }}</div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>专业数</span>
                </div>
              </td>
              <td
                class="content-rank"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>{{ item.yxMajorNum }}</div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div><span>博士点</span></div>
              </td>
              <td
                class="content-rank"
                v-for="item in compareList"
                :key="item.code"
              >
                <div v-for="bo in item.pointsOfBo" :key="bo.number">
                  <p class="rank">{{ bo.type }}:{{ bo.number }}</p>
                </div>
              </td>
            </tr>
            <tr>
              <td width="136" class="common-left-content">
                <div>
                  <span>硕士点</span>
                </div>
              </td>
              <td
                class="content-rank"
                v-for="item in compareList"
                :key="item.code"
              >
                <div v-for="shuo in item.pointsOfShuo" :key="shuo.number">
                  <p class="rank">
                    {{ shuo.number }}
                  </p>
                </div>
              </td>
            </tr>
            <tr>
              <td
                width="136"
                class="common-left-content content-countries-header"
              >
                <div>
                  <span>男生占比</span>
                </div>
              </td>
              <td
                class="content-countries"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>{{ item.maleRateOfStu }}</div>
              </td>
            </tr>
            <tr>
              <td
                width="136"
                class="common-left-content content-countries-header"
              >
                <div>
                  <span>女生占比</span>
                </div>
              </td>
              <td
                class="content-countries"
                v-for="item in compareList"
                :key="item.code"
              >
                <div>{{ item.femaleRateOfStu }}</div>
              </td>
            </tr>
          </tbody>
        </table>
        <p class="tips">* 以上信息仅供参考，详细数据以院校官方公布信息为准</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const route = useRouter();
const compareList = ref([]);
const handleAddCollege = () => {
  let compareColleteList = [];
  compareList.value.forEach((v) => {
    compareColleteList.push(v.code);
  });
  compareColleteList = JSON.stringify(compareColleteList);
  route.push({ name: 'searchCollege', query: { compareColleteList } });
};
onMounted(() => {
  if (!compareList.value) {
    compareList.value = [];
  } else {
    compareList.value = JSON.parse(localStorage.getItem('compareList'));
  }
});
</script>

<style lang="scss" scoped>
#collegeCompare {
  .comopare-title {
    height: 28px;
    margin: 30px 0;
    .title-bar {
      width: 4px;
      height: 22px;
      background: red;

      margin-right: 10px;
      font-weight: 500;
    }
  }
}

.second-table,
.second-table tr th,
.second-table tr td {
  border-bottom: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  padding: 15px;
  font-size: 14px;
}
.first-table,
.first-table tr th,
.first-table tr td {
  border: 1px solid #e4e4e4;
}
table {
  width: 200px;
  min-height: 25px;
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
}
.college-compared-header-contaienr {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.tips {
  font-size: 12px;
  margin: 13px 0;
  font-weight: 400;
  color: #86909c;
  line-height: 20px;
}
.first-table {
  position: sticky;
  top: 110px;
  left: 0;
  background: #fff;
}
</style>
